<template>
    <div class="body">
        <div class="dialog" id="dialog">
            我是机器人
        </div>
        <el-divider />
        <div class="input" ref="input" v-loading="state.loading">
            <el-input
                v-model="state.user_dialog"
                :rows="6"
                type="textarea"           
            />
            <el-button type="success" @click="inputClick">发送</el-button>
        </div>
    </div>
</template>  

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { faceInspectorServer,deepClone } from '@/utils'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'

const state = reactive({
    user_dialog:"",
    robot_dialog: "",
    loading:false,
})
let input=ref(null)
// 添加机器人对话内容
const append_robot_dialog=(text_value)=>{
    let dialogObj = document.getElementById('dialog')
    // 创建一个p元素
    let para = document.createElement("p");
    // 向p元素添加文本
    para.innerHTML = "机器人：";
    // 为p元素添加样式
    para.style.color = "red";
    para.style.fontFamily = "Arial";
    para.style.fontSize = "20px";
    dialogObj.appendChild(para);
    // 创建机器人的对话
    let robot_text_div = document.createElement("div");
    robot_text_div.style.borderStyle = "dotted";
    robot_text_div.style.borderRadius = "5px";
    robot_text_div.style.borderColor = "red"
    // robot_text_div.style.height = "50px";
    robot_text_div.style.whiteSpace="pre-wrap"
    robot_text_div.innerHTML = text_value;    
    dialogObj.appendChild(robot_text_div);
}
// 添加客户对话内容
const append_user_dialog=()=>{
    let dialogObj = document.getElementById('dialog')
    let div_temp = document.createElement("div");
    div_temp.style.display = "flex";
    div_temp.style.flexFlow = "column nowrap";
    div_temp.style.justifyContent = "right";
    div_temp.style.alignItems = "flex-end";
    // 创建一个p元素
    let para = document.createElement("p");
    // 向p元素添加文本
    para.innerHTML = "我:";
    para.style.color = "blue";
    para.style.fontFamily = "Arial";
    para.style.fontSize = "20px";
    div_temp.appendChild(para);
    // 创建用户对话内容的div
    let user_text_div = document.createElement("div");
    user_text_div.style.borderStyle = "dotted";
    user_text_div.style.borderRadius = "5px";
    user_text_div.style.borderColor = "blue"
    user_text_div.style.whiteSpace="pre-wrap"   
    // user_text_div.style.height = "100px";
    user_text_div.innerHTML = state.user_dialog;
    div_temp.appendChild(user_text_div)
    dialogObj.appendChild(div_temp);
}

onMounted(()=>{
    append_robot_dialog("我是人工智能机器人，擅长自然语言处理，比如输入:帮我写一篇关于中国传统节假日的英语作文，单词字数在500字以内")
})

// 客户输入文本发送点击事件
const inputClick=()=>{
    if(state.user_dialog==''){
        ElMessage.error("请输入内容后，再点击发送")
        return false        
    }
    append_user_dialog()
    state.loading=true
    // 向服务器发送请求
    let params={ text: state.user_dialog}
    axios.post("/ChatCompletionAPIView/", params).then(res => {
      console.log("机器人答复了：",res)
      state.loading=false
      if (res.code==200){
        ElMessage.success("收到机器人的回复")
        state.robot_dialog = res.data.results
        append_robot_dialog(state.robot_dialog)
        state.user_dialog='' 
      }else{
        alert("获取机器人回复失败，请联系管理员")
      }
    }).catch((error)=>{
      console.log("获取机器人答复错误", error)
    })
  
}
</script>
<style scoped>
.body{
    width: 800px;
}
.dialog{
    display: flex;
    flex-flow: column nowrap;
    justify-content:left;
    align-items: flex-start;
    margin: 3px;
}
.input{
    display: flex;
    flex-flow: column nowrap;
    justify-content: right;
    align-items: flex-end;
    margin: 3px;
    padding: 2px;
    /* height: 150px; */
    border-style: solid;
    border-radius: 10px;

}
</style>